<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<div class="row clearfix">
	<div class="col-md-12 column">
		<div class="row clearfix">
			<div class="col-md-2 column"></div>
			<div class="col-md-8 column">
				<table class="table table-responsive table-hover table-striped table-bordered" id="rayTypeTable">
					<thead>
						<tr>
							<th>#</th>
							<th>序号</th>
							<th>射线种类</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${list}" var="obj">
						<tr>
							<td> 
								<input type="checkbox" value="${obj.id}">
							</td>
							<td>${obj.id}</td>
							<td>${obj.content}</td>
						</tr>
					</c:forEach>
					</tbody>
				</table>
			</div>
			<div class="col-md-2 column"></div>
		</div>
		<div class="row clearfix">
			<div class="col-md-5 column"></div>
			<div class="col-md-2 column"></div>
			<div class="col-md-1 column">
				<button type="button" class="btn btn-default" id="rayType-add" onclick="rayTypeAddBtnHandler()">添加</button>
			</div>
			<div class="col-md-1 column">
				<button type="button" class="btn btn-default" id="rayType-del" onclick="rayTypeDelBtnHandler()">删除</button>
			</div>
			<div class="col-md-3 column"></div>
		</div>
	</div>
</div>
<script type="text/javascript">
	function rayTypeAddBtnHandler() {
		$("#rayTypeContent").val("");	//清空表单数据
		$(".form-group").removeClass('has-error has-success');//清空验证
		$("#valierr").remove();
		
		$('#rayTypeModal').modal({
			backdrop : 'static'
		});
	}

	function rayTypeDelBtnHandler() {
		var selected = $("#rayTypeTable input[type='checkbox']:checked");
		if(selected.length > 1 || selected.length <= 0) {
			showWarningMsg('请选择一个要删除的数据',true);
			return;
		}
		var id = selected.val();
		$.ajax({
			url:'base/rayType/del/'+id ,
			type : 'post' ,
			contentType: 'application/json' ,
			success : function( data ){
				if(data.result) flushTable();
				else showWarningMsg(data.msg);
			}
		});
	}
	
	function rayTypeAddBtnSave(){
		
		$("#rayTypeForm").validation();
		if ($("#rayTypeForm").valid() == false) return;
		
		var s = $("#rayTypeContent").val();
		$("form").validation();
		var data = {content:s};
		$.ajax({
			url:'base/rayType/save' ,
			type : 'post' ,
			contentType: 'application/json' ,
			data : JSON.stringify(data) ,
			success : function( data ){
				if(data.result) flushTable();
				else showWarningMsg(data.msg);
			}
		});
		
		$('#rayTypeModal').modal('hide');
	}
	
	function flushTable() {
		showLoding();
		$.ajax({
			url:'base/queryJson?name=rayType',
			success : function( data ){
				hideLoading();
				if(data.result) {
					$("#rayTypeTable tbody").empty();
					for(var i = 0;i<data.data.length;i++) {
						var item = data.data[i];
						var html  = "<tr><td><input type=\"checkbox\" value="+item.id+"></td>"
									+"<td>"+item.id+"</td><td>"+item.content+"</td></tr>";
						
						$("#rayTypeTable tbody").append(html);
					}
				}
				else showWarningMsg(data.msg);
			}
		});
	}
</script>

<div class="modal fade" id="rayTypeModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" >添加数据</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" id="rayTypeForm">
					<div class="form-group">
						<label for="rayTypeContent" class="col-sm-2 control-label">射线种类</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="rayTypeContent" placeholder="请输入" 
								check-type="required" required-message="请输入射线种类">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" onclick="rayTypeAddBtnSave()">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
